<template>
	<view class="page">
		
		<View id="fixed-dom">
			<u-navbar  back-icon-color="#fff" :back-text-style="{color:'#fff'}"  :border-bottom="false" :is-back="true" back-text="设备信息" :background="{ background:'#357BED'}"></u-navbar>
			<u-tabs :list="tabList" :is-scroll="false" bg-color="#357BED" active-color="#fff" bar-width="100" :bar-style="{bottom: '-4rpx'}" inactive-color="rgba(255,255,255,0.5)" bar-height="4" :bold="false" :current="current" @change="change"></u-tabs>
			<view v-if="current == 0" class="card">
				<view class="title">
					设备监控数据
				</view>
				<view class="row u-flex u-row-between">
					<view v-for="item in 5" :key="item" class="item u-flex u-row-center">
						<text>报警</text>
						<text>0</text>
					</view>
				</view>
			</view>
			<view class="dropdown">
				<u-dropdown ref="uDropdown" border-bottom>
					<u-dropdown-item @change="changeItem($event,'1')" v-model="value1" :title="val1  ? val1 : '设备类型'" :options="options1"></u-dropdown-item>
					<u-dropdown-item @change="changeItem($event,'2')" v-model="value2" :title="val2  ? val2 : '设备状态'" :options="options2"></u-dropdown-item>
					<u-dropdown-item @change="changeItem($event,'3')" v-model="value3" :title="val3  ? val3 : '单位区域'" :options="options3"></u-dropdown-item>
				</u-dropdown>
			</view>
		</View>
		
		
		<scroll-view  :style="{height: height + 'px' }" :upper-threshold="100" @scrolltoupper="scrolltoupper" scroll-y="true" @scrolltolower="scrolltolower" :lower-threshold="300">
			<view class="list">
				<view v-for="(item,index) in list" :key="index" class="item">
					<view class="body">
						<view class="header u-flex u-row-between">
							<view class="title u-flex">
								<image v-if="devicesList[item.DeviceType]" style="width: 40rpx; height: 40rpx; margin-right: 15rpx;" :src="require(`../../static/img/${devicesList[item.DeviceType].icon}.png`)" /></image>
								<text>{{devicesList[item.DeviceType].title}}</text>
							</view>
							<view class="status u-flex u-row-center">
								<text>{{item.Status == 1 ? '正常' : '离线'}}</text>
								<u-icon style="margin-left:10rpx" name="arrow-right" color="#9e9e9e" size="28" />
							</view>
							
						</view>
						<view class="infor">
							<view class="infor-2">
								<text>设备编号：</text>
								<text>{{item.DeviceCode}}</text>
							</view>
							<view class="infor-2">
								<text>设备位置：</text>
								<text>{{item.Location}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" icon-type="flower" bg-color="transperant"   margin-top="30" margin-bottom="30"/>
			</view>
		</scroll-view>
		<u-empty margin-top="160" :show="total == 0" text="暂无数据" mode="list"></u-empty>
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			
			height: 0,
			total: -1,
			tabList: [{
				name: '消防'
			}, {
				name: '安防'
			}, {
				name: '防雷',
			}],
			list: [],
			current: 0,
			value1: '',
			val1: '',
			value2: '',
			val2: '',
			value3: '',
			val3: '',
			options1: [{
					label: '全部',
					value: '',
				},{
					label: '防雷检测',
					value: 1,
				},
				{
					label: '接地电阻',
					value: 2,
				},
				{
					label: '峰值记录仪',
					value: 3,
				},
				{
					label: '雷击预警',
					value: 4,
				},
	
			],
			options2: [{
				label: '全部',
				value: '',
			},{
				label: '正常',
				value: 1,
			},
			{
				label: '离线',
				value: 2,
			},
			{
						label: '报警',
						value: 3,
					},
			],
			options3: [{
				label: '全部',
				value: '',
			}],
			userInfo: {},
			pageIndex: 1,
			pageSize: 5,
			status: 'loadmore',
			devicesList: {
					'1': {
						title: '防雷监测',
						icon: 'devices-icon6',
					},
					'2': {
						title: '接地电阻',
						icon: 'devices-icon5',
					},
					'3': {
						title: '峰值记录仪',
						icon: 'devices-icon7'
					},
					'4': {
						title: '峰值记录仪',
						icon: 'devices-icon6'
					}
				}
		}
	},
	mounted() {
		this.setScorllViewHeight();
	},
	methods: {
		onPullDownRefresh() {
			this.pageIndex = 1;
			this.list = [];
			this.getList()
		},
		setScorllViewHeight() {
			const query = uni.createSelectorQuery().in(this);
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					query.select('#fixed-dom').boundingClientRect(data => {
						_this.height = res.windowHeight - data.height
					}).exec();
				}
			})
		},
		change(index) {
			this.current = index;
			this.pageIndex = 1;
			this.list = [];
			this.getList();
			this.$nextTick(() =>{
				this.setScorllViewHeight();
			})
		},
		scrolltolower() {
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.getList()
		},
		changeItem(index,optionsIndex) {
			this['value' + index] = index;
			
			this['options' + optionsIndex].map((item) => {
				if (item.value === index) {
					this['val' + optionsIndex] = item.label;
				}
			})
			this.$refs.uDropdown.highlight(optionsIndex - 1);
			this.pageIndex = 1;
			this.list = [];
			this.getList();
		},
		async getList() {
			this.$axios.post('Device/Xquery',{...this.userInfo,tableIndex: 'spd',pageSize: this.pageSize,pageIndex: this.pageIndex,Status:this.value2,DeviceType:this.value1,RegionId:this.value3,}, p => {
				this.total = p.count
				this.list = this.list.concat(p.data);
				 if (this.list.length >= p.count) {
					this.status = "nomore"
				 } else {
					this.pageIndex += 1;
					this.status = "loadmore"
				 }
				 uni.stopPullDownRefresh();
			})
		},
		getRegion() {
			this.$axios.post('Region/XGetRegion',{...this.userInfo}, p => {
				p.data.map(item => {
					this.options3.push({
						label: item.RegionTitle,
						value: item.ID
					})
				})
			})
		}
	},
	onShow() {
		this.userInfo=this.$util.getUserInfo()
		this.getRegion();
		this.getList();
	},
}
</script>

<style scoped lang="scss">
	page {
	}
	.page {
		background: rgb(244,244,244);
	}
	
	.fixed {
		position: fixed;
		left: 0;
		z-index: 99;
		width: 100%;
		flex: 1;
		top: 0rpx;
	}
	
	
	.card {
		margin: 0rpx 30rpx 8rpx;
		padding:30rpx 0;
		border-radius: 20rpx;
		background-color: #fff;
		.title {
			font-size: 30rpx;
			padding: 0 30rpx 38rpx;
			color: #2e86ff;
		}
		.item {
			flex-direction: column;
			flex: 1;
			position: relative;
			font-size: 29rpx;
			color: #080808;
			text:nth-of-type(1) {
				margin-bottom: 15rpx;
			}
		}
		.item::after {
			height: 66rpx;
			width: 2rpx;
			background: #E4E7ED;
			display: block;
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		
		.item:nth-last-of-type(1)::after {
			background: #fff;
		}
	}
	.dropdown {
		background: #fff;
	}
	.list {
		padding: 5rpx 0;
		.item {
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 14rpx;
			.body {
				color: #383838;
				flex: 1;
				.header {
					padding-bottom: 35rpx;
					font-size: 29rpx;
					border-bottom: 1rpx solid #E4E7ED;
					.title {
						font-weight: bold;
					}
				}
				.infor {
					font-size: 28rpx;
					flex: 1;
					.infor-2 {
						font-size: 28rpx;
						color: #9e9e9e;
						padding-left: 40rpx;
						padding-top: 20rpx;
						text:nth-last-of-type(1) {
							color: #000;
						}
					}
				}
			}
			
		}
	}
	
	
		
	
</style>